<template>
  <yd-layout class = "answers">
    <v-header slot="navbar" title="公益问答">
      <router-link to="/" slot = "left">
        <yd-navbar-back-icon></yd-navbar-back-icon>
      </router-link>
      <yd-icon name="compose" slot = "right" size = ".4rem"></yd-icon>
      <yd-icon name="share3" slot = "right" size = ".4rem" class = 'ml'></yd-icon>
    </v-header>
    <div class="body">
      <div class="ques">
        <h1 class = "f1 qes_con">夜晚你是否难以入睡</h1>
        <div class="flex average text-center">
          <yd-button type="danger" shape="circle" @click.native = "submit">是</yd-button>
          <yd-button shape="circle" class = "ml disabled" @click.native = "submit">否</yd-button>
        </div>
      </div>
      <div class="round average flex bottom ques_nav">
        <div class="text-center ques_li">
          <yd-icon name="question"></yd-icon>
          <p>公益问答</p>
        </div>
        <div class="text-center ques_li">
          <yd-icon name="question"></yd-icon>
          <p>抽奖</p>
        </div>
        <div class="text-center ques_li">
          <yd-icon name="question"></yd-icon>
          <p>抢福利</p>
        </div>
      </div>
      <div class="ranki_list">
        <h2 class="title">公益排行榜</h2>
        <div class="flex middle rank_li" v-for = "(item, index) in rankLi" :key="index">
          <box :bgImg = "item.imgSrc" prop = "66:196" class = "rank_logo"></box>
          <div class="f1 rank_con">
            <h3 class="title">{{ item.title }}</h3>
            <div class="desc">{{ item.desc }}</div>
          </div>
        </div>
      </div>
    </div>
    <yd-popup v-model="show" position="center" width="90%">
      <div class = "prop">
        <h1 class="text-center title">恭喜机智的你回答正确！</h1>
        <p class = "prop_con">
          <box bgImg = "http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg" prop = "295:344"></box>
        </p>
      </div>
    </yd-popup>
  </yd-layout>
</template>
<script>
export default {
  name: 'answers',
  data () {
    return {
      show: false,
      rankLi: []
    }
  },
  created () {
    this.rankLi = [{
      imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg',
      title: '商家标题',
      desc: '商家副标题'
    }, {
      imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg',
      title: '商家标题',
      desc: '商家副标题'
    }, {
      imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg',
      title: '商家标题',
      desc: '商家副标题'
    }, {
      imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg',
      title: '商家标题',
      desc: '商家副标题'
    }, {
      imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg',
      title: '商家标题',
      desc: '商家副标题'
    }, {
      imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg',
      title: '商家标题',
      desc: '商家副标题'
    }, {
      imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg',
      title: '商家标题',
      desc: '商家副标题'
    }, {
      imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg',
      title: '商家标题',
      desc: '商家副标题'
    }, {
      imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg',
      title: '商家标题',
      desc: '商家副标题'
    }, {
      imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg',
      title: '商家标题',
      desc: '商家副标题'
    }, {
      imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg',
      title: '商家标题',
      desc: '商家副标题'
    }, {
      imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg',
      title: '商家标题',
      desc: '商家副标题'
    }, {
      imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg',
      title: '商家标题',
      desc: '商家副标题'
    }, {
      imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg',
      title: '商家标题',
      desc: '商家副标题'
    }, {
      imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg',
      title: '商家标题',
      desc: '商家副标题'
    }]
  },
  methods: {
    submit () {
      this.show = true
    }
  }
}
</script>
<style lang="scss" scoped>
  .body{
    box-sizing: border-box;
    padding: $padding;
    .ques{
      background-color: #fff;
      border-radius: .2rem;
      padding: .2rem;
      box-sizing: border-box;
      .qes_con{
        margin-bottom: .1rem;
        height: 2rem;
        font-size: 1.5em;
      }
    }
    .ques_nav{
      background-color: #fff;
      height: 2rem;
      padding-bottom: .2rem;
      margin: .1rem 0;
    }
    .ranki_list{
      background-color: #fff;
      margin: .1rem 0;
      padding: .1rem;
      >.title{
        font-size: 1.3em;
        margin: .2rem 0;
      }
      .rank_li{
        padding: .1rem .2rem;
        margin: .1rem 0;
        border: 1px solid #ddd;
        border-radius: .1rem;
        .rank_logo{
          flex: 3;
        }
        .rank_con{
          padding-left: .2rem;
          box-sizing: border-box;
          .title{
            font-size: 1.4em;
            margin-bottom: .2rem;
          }
          .desc{
            color: #999;
          }
        }
      }
    }
  }
  .prop{
    box-sizing: border-box;
    background-color: #fff;
    padding: $padding;
    .title{
      font-size: 1.5em;
      margin: .1rem 0;
    }
    .prop_con{
      padding: 0 5%;
    }
  }
</style>
